import React, { Component } from 'react'

/*
    因为 Footer 组件要被 页面1 和 页面2 使用，那么所以 Footer 组件要
    单独定义，可以在不同页面中多次被使用
*/


// withFooter 是一个函数，该函数接收一个参数，参数是一个组件
// 会有一个返回值，返回的是一个新的组件
const withFooter = (Com) => {
    class Footer extends Component {
        render() {
            return (<>
                <Com title='React 高阶组件 HOC' />
                <footer style={{ backgroundColor: '#f66', height: 50 }}>页脚</footer>
            </>)
        }
    }
    return Footer
}

// withFooter 高阶组件的用法，接收一个组件，返回一个新的组件，新组件中可以注入一个新的内容
const Page1 = withFooter((props) => {
    return (<>
        <h1>Page1 页面 - {props.title}</h1>
    </>)
})

// 装饰器的写法，可以直接将装饰器下面的组件自动加到高阶组件中
// 但是现在 cra 有意在不支持装饰器写法
// @withFooter()
let Page2 = (props) => {
    return <>
        <h1>Page2 页面 -- {props.title} </h1>
    </>
}
Page2 = withFooter(Page2)

export default class App extends Component {
    render() {
        return (
            <div>
                <Page1 />

                <hr />

                <Page2 />

            </div>
        )
    }
}
